<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>设备控制</title>
    <link rel="stylesheet" href="../static/css/normalize.css" />
    <link rel="stylesheet" href="../static/css/swiper.min.css" />
    <link rel="stylesheet" href="../static/css/machine.css" />
<!--    <link rel="stylesheet" href="../static/css/menu.css" />-->
    <script type="text/javascript" src="../static/js/jquery.js"> </script>
<!--    <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>-->
    <!--  return false防跳转-->
    <script type=text/javascript> $(function() { $("#start").click(function (event) { $.getJSON('/start', { },
    function(data) { }); return false; }); }); </script>
    <script type=text/javascript> $(function() { $("#pause").click(function (event) { $.getJSON('/pause', { },
    function(data) { }); return false; }); }); </script>
    <script>
        $(document).ready(function() {//ready确保加载元素后执行
            $("#5s").click(function(event) {
              $.getJSON('/5s', {}, function(data) { });
              return false;
            });
        });
        $(document).ready(function() {
            $("#10s").click(function(event) {
              $.getJSON('/10s', {}, function(data) { });
              return false;
            });
        });
        $(document).ready(function() {
            $("#30s").click(function(event) {
              $.getJSON('/30s', {}, function(data) { });
              return false;
            });
        });
        $(document).ready(function() {
            $("#1min").click(function(event) {
              $.getJSON('/1min', {}, function(data) { });
              return false;
            });
        });
        $(document).ready(function() {
            $("#5min").click(function(event) {
              $.getJSON('/5min', {}, function(data) { });
              return false;
            });
        });
        $(document).ready(function() {
            $("#10min").click(function(event) {
              $.getJSON('/10min', {}, function(data) { });
              return false;
            });
        });
        $(document).ready(function() {
            $("#15min").click(function(event) {
              $.getJSON('/15min', {}, function(data) { });
              return false;
            });
        });
        $(document).ready(function() {
            $("#30min").click(function(event) {
              $.getJSON('/30min', {}, function(data) { });
              return false;
            });
        });
        $(document).ready(function() {
            $("#60min").click(function(event) {
              $.getJSON('/60min', {}, function(data) { });
              return false;
            });
        });
    </script>
</head>

<body>
    <section class="warp">
        <!-- 头部区域 -->
        <header class="header">设备控制</header>
        <!-- 设备选择模块 -->
        <section class="content">
            <!-- 头部 -->
            <div class="con-hd">
                <h4>
                    <span class="icon"><img src="../static/icons/纯天然.png" alt="" /></span>
                    设备选择
                </h4>
                <a href="#" class="more">更多>></a>
            </div>
            <!-- 旋转木马轮播图模块 -->
            <div class="get_job_focus">
                <!-- Swiper -->
                <div class="swiper-container get_job_fo">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="machine1.html"><img src="../static/images/tea1.png" alt="" /></a>
                            <p>设备1</p>
                        </div>
                        <div class="swiper-slide">
                            <a href="machine1.html"><img src="../static/images/tea2.png" alt="" /></a>
                            <p>设备2</p>
                        </div>
                        <div class="swiper-slide">
                            <a href="machine1.html"><img src="../static/images/tea3.png" alt="" /></a>
                            <p>设备3</p>
                        </div>
                    </div>
                </div>
                <!-- Add Arrows 根据需求这个代码放到 container外面 添加左右箭头-->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
            </div>
        </section>

        <!-- 导航栏部分 -->
        <nav class="nav">
            <a href="show.html" class="item">
                <img src="../static/icons/含水.png" alt="" />
                <span>含水率</span>
            </a>
            <a href="show.html" class="item">
                <img src="../static/icons/嫩芽.png" alt="" />
                <span>嫩芽数</span>
            </a>
            <a href="showimg.html" class="item">
                <img src="../static/icons/图像.png" alt="" />
                <span>图像</span>
            </a>
            <a href="show.html" class="item">
                <img src="../static/icons/特征信息.png" alt="" />
                <span>空气温湿度</span>
            </a>
            <a href="show.html" class="item"><!--href="show.html"-->
                <!--<img src="../static/icons/开始.png" alt="" />-->
                <input type = "image" id = "start" src="../static/icons/开始.png" value = "Click Here" />
                <span>开始检测</span>
            </a>
            <a href="show.html" class="item"><!--href="#"-->
                <!--<img src="../static/icons/暂停.png" alt="" />-->
                <input type = "image" id = "pause" src="../static/icons/暂停.png" value = "Click Here" />
                <span>停止检测</span>
            </a>
            <a class="item" id="menu"><!--href="show.html"-->
                <!--<img src="../static/icons/时间.png" alt="" />-->
                <input type = "image" id = "set_time" src="../static/icons/时间.png" value = "Click Here"/><!---->
<!--                <button id="menu-toggle">菜单</button>-->

                <span>设置检测时间</span>

                <div class="submenu" id="submenu_id">
                      <ul>
                         <li><a id="5s">5s</a></li>
                         <li><a id="10s">10s</a></li>
                         <li><a id="30s">30s</a></li>
                         <li><a id="1min">1min</a></li>
                         <li><a id="5min">5min</a></li>
                         <li><a id="10min">10min</a></li>
                         <li><a id="15min">15min</a></li>
                         <li><a id="30min">30min</a></li>
                         <li><a id="60min">60min</a></li>
                      </ul>
                </div>

            </a>

            <a href="warn.html" class="item">
                <img src="../static/icons/警告.png" alt="" />
                <span>报警</span>
            </a>
        </nav>

        <br>

    </section>

    <footer class="footer">
        <a href="index.html" class="item">
            <img src="../static/icons/首页1.png" alt="" />
            <p>首页</p>
        </a>
        <a href="machine.html" class="item">
            <img src="../static/icons/分类.png" alt="" />
            <p>设备控制</p>
        </a>
        <a href="history.html" class="item">
            <img src="../static/icons/历史1.png" alt="" />
            <p>历史数据</p>
        </a>
        <a href="mine.html" class="item">
            <img src="../static/icons/我的1.png" alt="" />
            <p>我的</p>
        </a>
    </footer>




<script>
$(document).ready(function() {

  var submenu = $('.submenu');

  // 显示和隐藏下拉菜单
  $('.item').click(function(e) {
    e.stopPropagation();
    var $this = $(this);
    $('.item').not($this).removeClass('active');
    $this.toggleClass('active');
    if ($this.hasClass('active')) {
      var x = $this.offset().left + $this.width() / 2 - submenu.width() / 2;
      // 要将子菜单放置在时间图标正上方，需要减去子菜单的高度并减去一些额外的像素。
      var y = $this.offset().top - submenu.height() + 150;//-10
      submenu.css({
        left: x,
        top: y
      }).show();
    } else {
      submenu.hide();
    }
  });

  // 隐藏下拉菜单
  $(document).click(function() {
    $('.item').removeClass('active');
    submenu.hide();
  });

  // 菜单选项点击事件
  submenu.find('a').click(function() {
    submenu.hide();
  });

});

</script>

    <script src="../static/js/flexible.js"></script>
    <script src="../static/js/swiper.min.js"></script>
    <script>
        // 第一个函数里面是 就业指导轮播图
        (function () {
            var swiper = new Swiper(".get_job_fo", {
                // 能够显示的 slider的个数
                slidesPerView: 2,
                // 每一个slide之间的距离
                spaceBetween: 30,
                centeredSlides: true,
                loop: true,
                // 添加左右箭头
                navigation: {
                    nextEl: ".swiper-button-next",
                    prevEl: ".swiper-button-prev",
                },
            });
        })();
        // 第二个函数的轮播图
        (function () {
            //  如果有多个轮播图最好修改下 swiper-container
            var swiper = new Swiper(".study_fo", {
                // 我们可以可以看看到的是 2个半
                slidesPerView: 2.2,
                spaceBetween: 20,
            });
        })();
    </script>




</body>

</html>